
<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>flexible color style - Timer ver</title>
        
        <style>
        @import url("style.css");
        </style>
        
        <script>
        
        window.onload = function()
        {
            var d = new Date();
            var h = d.getTime()%360;
            var body = document.body;
            body.style.backgroundColor = "hsl(" + h + ",50%, 50%)";
        };
        
        </script>

    </head>
    
    <body>
        <header id="header">
            <hgroup>
                <h1>Flexible Color Style - Timer ver</h1>
                <h2>
                    更新するたびに背景色が変化します.
                </h2>
            </hgroup>
            <nav id="nav">
                <div class="inner">
                    <ul>
                        <li><a href="#">Item0</a></li>
                        <li><a href="#">Item1</a></li>
                        <li><a href="#">Item2</a></li>
                        <li><a href="#">Item3</a></li>
                        <li><a href="#">Item4</a></li>
                    </ul>
                </div>
            </nav>
        </header>
        
        <div id="contents">
            
            <section id="main">
                
                <article class="entry">
                    
                    <header>
                        <h1>Title</h1>
                    </header>
                    
                    <div class="content">
                        
                        <p>
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                        </p>
                        
                        <section>
                            <h2>Sub Title</h2>
                            <p>
                                Text Text Text Text Text Text Text Text
                                Text Text Text Text Text Text Text Text
                            </p>
                            
                            <section>
                                <h3>Sub Sub Title</h3>
                                <p>
                                    Text Text Text Text Text Text Text Text
                                    Text Text Text Text Text Text Text Text
                                </p>
                            </section>
                        </section>
    
                        <p>
                            Text Text Text Text Text Text Text Text
                            Text Text Text Text Text Text Text Text
                        </p>
                        
                    </div>
                    
                    <footer>
                        20XX/YY/ZZ
                    </footer>
                    
                </article>
                
            </section>
            
            <aside id="side">
                <section class="side-box">
                    <h1>Text</h1>
                    <p>
                        Text Text Text Text
                        Text Text Text Text
                        Text Text Text Text
                        Text Text Text Text
                    </p>
                </section>
                
                <section class="side-box">
                    <h1>Text</h1>
                    <ul>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                    </ul>
                </section>
                
                <section class="side-box">
                    <h1>Text</h1>
                    <ul>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                        <li><a href="#">Text Text</a></li>
                    </ul>
                </section>
                
            </aside>
            
        </div>
        
        <footer id="footer">
            <p>
                <a href="http://tmlife.net">Home</a>
            </p>
            <address>Copyright &copy; 2011 phi. All Rights Reserved.</address>
        </footer>

    </body>
</html>


